<template>
  <div class="menu">
    <el-menu
        class="el-menu-vertical-demo"
        background-color="#2f4050"
        text-color="#ffffff"
        model="vertical"
        :router="true"
        :collapse="collapse"
        active-text-color="#ffd04b">

      <el-menu-item v-for="(menu,index) in menus" :key="index" :index="index+''" :route="menu.path">
        <i :class="menu.iconClass"></i>
        <span slot="title">{{ menu.name }}</span>
      </el-menu-item>

    </el-menu>
  </div>
</template>

<script>
export default {
  name: "Menu",
  props: ['collapse'],
  data() {
    return {
      menus: []
    }
  },
  created() {
    this.$router.options.routes.forEach((value) => {
      if (!value.hidden) {
        value.children.forEach(menu => {
          this.menus.push(menu)
        })
      }
    })
  }
}
</script>

<style lang="scss">
.menu {
  height: 100%;

  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
  }

  .el-menu {
    height: 100%;
    .fa {
      margin-right: 10px;
    }
  }
}
</style>
